<template>
  <div>
    <div class="JS_container textCenter bigSearch">
      <Card class="relative" :style="`height:${$app.winHeight-140}px;`">
        <div class="wrap absolute fixedCenter" style="bottom:auto;top:20%;">
          <h1>服务猫一键查</h1>
          <p class="slogan">免费查询,秒出结果,亿万精准数据实时更新</p>

          <div class="tm-category" style="height: 30px">
            <div v-show="isShowTabar==1">
              <span class="pointer cBlue" @click="FenL45BB">更多商标分类查询>></span>
            </div>
          </div>

          <!-- 头部二选一框 -->
          <div class="tabbar relative">
            <span
              class="itemBar"
              :class="isShowTabar==1?' act ':' '"
              @click="isShowTabar=1, placeholder='请输入商标名称',tm_tab_type=0,reg_people_names=[]"
            >商标</span>
            <span class="line">|</span>
            <span
              class="itemBar"
              :class="isShowTabar==2?' act ':' '"
              @click="isShowTabar=2,placeholder='请输入专利名称', pt_tab_type=2,reg_people_names=[]"
            >专利</span>

            <!-- <Icon type="ios-help-circle-outline"  class="absolute cCCC pointer" style="right:10px;bottom:-10px;" size="24" @click="shuoMBox=!shuoMBox"/> -->
            <Modal
              class-name="vertical-center-modal"
              v-model="shuoMBox"
              title="权限说明"
              :footer-hide="true"
              :mask-closable="false"
              width="900"
              class="zZXx"
            >
              <img src="./img/qxLB/smgo.png" class="width100" />
            </Modal>
          </div>

          <!--       专利        -->
          <div v-show="isShowTabar==2">
            <div class="search">
              <Input
                search
                enter-button
                autofocus
                v-model="query_key"
                ref="aop"
                size="large"
                @on-search="searchPt"
                :placeholder="(!conMk())?placeholder:'暂无权限'"
                :disabled="conMk()"
                @on-blur="reg_people_show=false"
                @keyup.native.38="selectItem(-1)"
                @keyup.native.40="selectItem(1)"
              ></Input>
              <SearchList
                v-show="reg_people_show || reg_people_show2"
                ref="scroll"
                @mouseleave.native="reg_people_show2=false"
                :reg_people_names="reg_people_names"
                :type="pt_tab_type"
                :itemNum="itemNum"
                :state="0"
                :category="0"
              ></SearchList>
            </div>
            <!-- 专利tab卡 -->
            <CustomBtn :type="pt_tab_type" @select_type="selectType_pt"></CustomBtn>
            <div class="warpZ" v-show="vwrShow">
              <span v-if="!$app.judgeData(service_item_list.patent_search)">
                <span v-if="pt_tab_type>3">
                  暂无权限
                  <span class="cBlue pointer underline marginL10" @click="rweX()">获取权限 >></span>
                </span>
                <!-- <span v-else>
                  专利检索-已使用：
                  <span class="cBlue f_bold f_18">{{sbjJ}}</span> 次；
                  <span class="cBlue pointer underline marginL10" @click="rweX()">获取更多次数 >></span>
                </span> -->
              </span>
              <span v-else>
                到期时间：
                <span
                  class="cBlue f_bold f_18"
                >{{ $app.judgeData(service_item_list.patent_search) && service_item_list.patent_search.end_time}}</span>
              </span>
            </div>
          </div>

          <!-- 商标 -->
          <div v-show="isShowTabar==1">
            <!-- 45类检索 -->
            <div v-show="tm_tab_type==0">
              <div class="search">
                <Input
                  search
                  enter-button
                  autofocus
                  v-model="query_key"
                  ref="oop"
                  size="large"
                  @on-search="searchTm"
                  :placeholder="juVvQ()?placeholder:'暂无权限'"
                  @on-blur="reg_people_show=false"
                  @keyup.native.38="selectItem(-1)"
                  @keyup.native.40="selectItem(1)"
                  :disabled="!juVvQ()"
                >
                  <div
                    slot="prepend"
                    class="pointer textLeft"
                    @click="f_45BoxC=!f_45BoxC"
                    style="width:130px;"
                  >
                    第{{fcgnum}}类 - {{owrX()}}
                    <Icon :type="(!!f_45BoxC)?'ios-arrow-up':'ios-arrow-down'" class="pullRight" />
                  </div>
                </Input>
                <div v-show="f_45BoxC">
                  <div class="f_45ModalBox textLeft">
                    <Button
                      v-for="(val) in listcCm"
                      :key="'dr'+val.fcgid"
                      shape="circle"
                      :type="fcgnum==val.fcgnum?'primary':'text'"
                      @click="werC(val.fcgnum)"
                    >第{{val.fcgnum}}类 - {{val.fcgname}}</Button>
                  </div>
                  <div class="f_45MoBg" @click="f_45BoxC=false"></div>
                </div>
              </div>
            </div>

            <!-- 查询 -->
            <!-- 0商标成功率检索 5图形检索 -->
            <div v-show="tm_tab_type!==0 && tm_tab_type !==5 ">
              <div class="search">
                <Input
                  search
                  enter-button
                  autofocus
                  v-model="query_key"
                  ref="oop"
                  size="large"
                  @on-search="searchJTm"
                  :placeholder="(!conWc())?placeholder:'暂无权限'"
                  @on-blur="reg_people_show=false"
                  @keyup.native.38="selectItem(-1)"
                  @keyup.native.40="selectItem(1)"
                  :disabled="conWc()"
                ></Input>
                <SearchList
                  v-show="reg_people_show || reg_people_show2"
                  ref="tm"
                  @mouseleave.native="reg_people_show2=false"
                  :reg_people_names="reg_people_names"
                  :type="tm_tab_type"
                  :itemNum="itemNum"
                  :state="0"
                  :category="1"
                ></SearchList>
              </div>
            </div>

            <!-- 图形查询 -->
            <div v-show="tm_tab_type==5">
              <div class="search">
                <Input
                  size="large"
                  :placeholder="juVvQ()?placeholder:'暂无权限'"
                  readonly
                  :disabled="!juVvQ()"
                >
                  <div
                    slot="prepend"
                    class="pointer textLeft"
                    @click="f_45BoxTuX=!f_45BoxTuX"
                    style="width:130px;"
                  >
                    第{{fcgnum}}类 - {{owrX()}}
                    <Icon :type="(!!f_45BoxTuX)?'ios-arrow-up':'ios-arrow-down'" class="pullRight" />
                  </div>
                  <!-- <Icon type="md-images" slot="prefix" class="relative" style="top:2px;" /> -->
                </Input>
                <input
                  ref="wj"
                  type="file"
                  class="InputFileBox"
                  @change="file_Up($event)"
                  accept="image/*"
                  v-show="juVvQ()"
                  style="left:145px;width:555px;"
                />
                <div v-show="f_45BoxTuX">
                  <div class="f_45ModalBox textLeft">
                    <Button
                      v-for="(val) in listcCm"
                      :key="'dr'+val.fcgid"
                      shape="circle"
                      :type="fcgnum==val.fcgnum?'primary':'text'"
                      @click="werC(val.fcgnum)"
                    >第{{val.fcgnum}}类 - {{val.fcgname}}</Button>
                  </div>
                  <div class="f_45MoBg" @click="f_45BoxTuX=false"></div>
                </div>
              </div>
            </div>

            <!-- 商标tab卡 -->
            <CustomBtnT :type="tm_tab_type" @select_type="selectType_tm"></CustomBtnT>
            <div class="warpZ" v-show="vwrShow">
              <!-- 按顺序排：0，1，5，2，3，4 -->
              <!-- 0 和 5 限次数 -->
              <!-- 1，2，3 任何身份都不限制 -->
              <!-- 4 需购买年套餐 -->
              <span v-show="tm_tab_type==0||tm_tab_type==5">
                <span v-if="!$app.judgeData(service_item_list.tm_search)">
                  商标检索-已使用：
                  <span class="cBlue f_bold f_18">{{sbjS}}</span> 次；
                  <span class="cBlue pointer underline marginL10" @click="rweX()">获取更多次数 >></span>
                </span>
                <span v-else>
                  到期时间：
                  <span
                    class="cBlue f_bold f_18"
                  >{{ $app.judgeData(service_item_list.tm_search) && service_item_list.tm_search.end_time}}</span>
                </span>
              </span>
              <span v-show="tm_tab_type==4">
                <span v-if="!$app.judgeData(service_item_list.tm_search)">
                  <span class="cBlue pointer underline marginL10" @click="rweX()">获取权限 >></span>
                </span>
                <span v-else>
                  到期时间：
                  <span
                    class="cBlue f_bold f_18"
                  >{{ $app.judgeData(service_item_list.tm_search) && service_item_list.tm_search.end_time}}</span>
                </span>
              </span>
            </div>
          </div>
        </div>
        <div class="absolute width100 f_18 f_bold cCCC" style="bottom:20px; ">科技改变服务</div>
      </Card>
    </div>

    <!-- 商标45分类弹框 -->
    <FenL45 ref="FenL45" />

    <!-- 图片裁切框 -->
    <CutImg ref="CutImg" @tmCutFun="tmCutFun" />

    <!-- 增值套餐 购买 -->
    <TaoCan ref="TaoCan" @huoDci="huoDci" />

    <Modal
      class-name="vertical-center-modal"
      v-model="TPzBox"
      title="增值服务购买"
      :footer-hide="true"
      :mask-closable="false"
      width="500"
    >
      <div @click="tmGoOne()">
        <div class="jaoWXt">
          
          <div class="overflowH">
            <div v-show="isShowTabar==1">
              <!-- 商标 -->
              <div class="f_18 drL">
                <i class="iconfont iconzuanshi1 cBlue f_28 pullLeft marginR10"></i>
                {{$app.judgeData(tmZzObj)&&tmZzObj.goods[0].name}}
                <div class="c999 f_14">{{$app.judgeData(tmZzObj)&&tmZzObj.goods[1].name}}</div>
              </div>
              <div class="drW cWhite">
                <span class=" f_20 f_bold">{{$app.judgeData(tmZzObj)&&parseFloat(tmZzObj.price)}} </span>
                <span class="f_14 ">元</span>
                <div class=" f_12 ">
                  点击购买
                </div>
              </div>
            </div>

            <div v-show="isShowTabar==2">
              <!-- 专利 -->
              <div class="f_18 drL">
                <i class="iconfont iconzuanshi1 cBlue f_28 pullLeft marginR10"></i>
                {{$app.judgeData(ptZzObj)&&ptZzObj.goods[0].name}}
                <div class="c999 f_14">{{$app.judgeData(ptZzObj)&&ptZzObj.goods[1].name}}</div>
              </div>
              <div class="drW cWhite">
                <span class=" f_20 f_bold">{{$app.judgeData(ptZzObj)&&parseFloat(ptZzObj.price)}} </span>
                <span class="f_14 ">元</span>
                <div class=" f_12 ">
                  点击购买
                </div>
              </div>
            </div>
          </div>

          <div class="clearfix"></div>
        </div>
      </div>

      <Divider />
      <div class="textCenter">
        <img src="./img/wzM1.jpg" width="150" class="inlineBlock" />
        <div class="f_20 marginB10">{{wxtC()}}</div>
        <div class="c999" style="margin-bottom:50px;">认证之后每日免费查询次数增长到10次</div>
        <span class="f_20 cBlue underline pointer" v-show="!$app.judgeData(companyAll) || companyAll.state==0" @click="$app.companyYes(companyAll)">立即认证</span>
      </div>
    </Modal>

    <PayBox ref="payBox" :noOrderList="true" />

    <!-- <TaoCan_tm ref="TaoCan_tm" />
    <TaoCan_p ref="TaoCan_p" />-->
  </div>
</template>

<style lang="less" scoped>
@import "./less/fenLei45.less";
.jaoWXt {
  border: 1px solid #5887ef;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  margin: 0 20px;
  cursor: pointer;
  .drL{
    padding:10px 15px;
    float:left;
    width: 74%;
    height: 70px;
    overflow: hidden;
  }
  .drW{
    float:right;
    background-color: #5887ef;
    text-align: right;
    width: 26%;
    height: 70px;
    padding-right:20px;
    overflow: hidden;
    padding-top:10px;
  }
}
</style>
<script>
import logoUrl from "@$@/img/logocn.png";
import CustomBtn from "./_currentTable/customBtn";
import CustomBtnT from "./_currentTable/customBtnT";
import SearchList from "./_currentTable/searchList";
import FenL45 from "./_service/fenL45";
import CutImg from "@$@/_tool/cutImg";

import TaoCan from "@$@/_service/taoCan"; // 套餐支付
import PayBox from "@$@/_service/payBox";

// import TaoCan_tm from "@$@/_service/taoCan_tm"; // 套餐支付
// import TaoCan_p from "@$@/_service/taoCan_p"; // 套餐支付

export default {
  name: "searchTmPt",

  data() {
    // 替换地址栏
    let{
      $route:{
        name,
        query:{
          isShowTabar,
          pt_tab_type,
          tm_tab_type
        }
      }
    }=this;

    let data = {
      logoUrl,
      isShowTabar: parseInt(isShowTabar)||1, // 1商标搜索 2专利搜索
      
      /******
       * 商标 搜索类型 
       * 收费：4代理人 5代理机构
       * 免费：1专利号 2专利名 3申请人
       *****/ 
      pt_tab_type: parseInt(pt_tab_type)||2, //老板心情爱好，默认=》2专利名

      /******
       * 商标 搜索类型 
       * 收费：0成功率 4代理机构 5图形查询
       * 免费：1商标名称 2申请号 3申请人
       *****/ 
      tm_tab_type:parseInt(tm_tab_type)||0,//老板心情爱好，默认=》0成功率

      query_key: "", // 关键字名称
      placeholder: "请输入商标名称",
      itemNum: 0, // 选择
      reg_people_names: [], // 模糊搜索结果
      reg_people_show: false, //失去焦点
      reg_people_show2: false, //移出界面
      fcgnum: 35, // 分类选择
      listcCm: [] // 商标45类，只有第一级
    };
    let tool = {
      shuoMBox: false,
      f_45BoxC: false, //45类框1
      f_45BoxTuX: false, //45类框图形专用
      vwrShow: false, //剩余次数
      TPzBox: false,
      companyAll: "",
      companyYes: false, //true已经认证，false没有认证

      tmZzObj: {}, // 商标套餐
      ptZzObj: {} // 专利套餐
    };
    let money = {
      role_service_item_list: {
        tm_search: {}, //商标查询
        patent_search: {} //专利查询
      }, //免费套餐
      service_item_list: {} //已经购买了年费的套餐
    };
    return Object.assign(data, tool, money);
  },
  components: {
    CustomBtn,
    CustomBtnT,
    SearchList,
    FenL45,
    CutImg,
    TaoCan,
    PayBox
    // TaoCan_tm,
    // TaoCan_p
  },

  // 监听tab框，清空搜索框值，满足田老板
  watch:{
    isShowTabar(newVal,oldVal){

      // 替换地址栏
      let{
        $route:{
          name,
          query:{
            isShowTabar,
            ...params
          }
        }
      }=this;

      //刷新地址栏
      $app.tagNavReplace({
        name,
        query:Object.assign(params,{
          isShowTabar:newVal
        })
      });
      
      this.query_key='';//清空输入框的值
    },
    // 商标 底部类型切换
    tm_tab_type(newVal,oldVal){

      // 替换地址栏
      let{
        $route:{
          name,
          query:{
            tm_tab_type,
            ...params
          }
        }
      }=this;

      //刷新地址栏
      $app.tagNavReplace({
        name,
        query:Object.assign(params,{
          tm_tab_type:newVal,
          isShowTabar:1
        })
      });


      if((oldVal==1 && newVal==0) || (oldVal==0 && newVal==1)){
        //query_key值不变
      }else if((oldVal==3 && newVal==4) || (oldVal==4 && newVal==3)){
        //query_key值不变
      }else{
        this.query_key='';
      }
    },
    // 专利 底部类型切换
    pt_tab_type(newVal,oldVal){

      // 替换地址栏
      let{
        $route:{
          name,
          query:{
            pt_tab_type,
            ...params
          }
        }
      }=this;

      //刷新地址栏
      $app.tagNavReplace({
        name,
        query:Object.assign(params,{
          pt_tab_type:newVal,
          isShowTabar:2
        })
      });


      if((oldVal==4 && newVal==5) || (oldVal==5 && newVal==4)){
        //query_key值不变
      }else{
        this.query_key='';
      }
    },
  },
  created() {
    
    // 获取商标45类
    $ajax.mGlistAll({fcgparent: 0},resData => {
        this.listcCm = resData;
    });

    this.huoDci(); //获得今天还剩下多少次查询的权限

    //获取企业信息
    $ajax.pInfo(resData => {
      this.companyAll = resData;
      if ($app.judgeData(resData) && resData.state == 2) {
        this.companyYes = true;
      }
    });

    // 商标查询套餐购买
    // 套餐类型,1商标检索,2商标管理,3拓客,4商标分析报告包年,5专利管理,6专利搜索,7专利查重,8混合套餐
    $ajax.psGoodsList(1, resData => {
      this.tmZzObj = resData[0];
    });

    // 专利查询套餐购买
    // 套餐类型,1商标检索,2商标管理,3拓客,4商标分析报告包年,5专利管理,6专利搜索,7专利查重,8混合套餐
    $ajax.psGoodsList(6, resData => {
      this.ptZzObj = resData[0];
    });
  },
  // 计算属性
  computed: {
    fcgname() {
      const index = this.fcgnum * 1 - 1;
      return this.listcCm[index].fcgname;
    },
    // 商标检索今天剩下多少次
    sbjS() {
      let out = "";
      // 没有购买包年套餐
      if (!$app.judgeData(this.service_item_list.tm_search)) {
        let {
          role_service_item_list: {
            tm_search: { num, used_num }
          }
        } = this;
        out = used_num + "/" + num;
      }
      return out;
    },
    // 专利检索，今天剩下多少次
    sbjJ() {
      let out = "";
      // 没有购买包年套餐
      if (!$app.judgeData(this.service_item_list.patent_search)) {
        let {
          role_service_item_list: {
            patent_search: { num, used_num }
          }
        } = this;
        out = used_num + "/" + num;
      }
      return out;
    }
  },
  mounted() {},
  // 绑定方法
  methods: {
    wxtC(){
      let out='';
      switch(parseInt(this.companyAll.state)){
        case 0:
          out='您还未进行账号认证';
        break;
        case 1:
          out='您的账号正在认证中';
        break;
        case 2:
          out='您的账号已认证通过';
        break;
        case 3:
          out='您的账号认证未通过';
        break;
        case 4:
          out='您的账号已注销';
        break;
      }
      return out
    },
    // 单个增资服务购买
    tmGoOne() {
      let {
        isShowTabar, //1商标,2专利
        tmZzObj,
        ptZzObj
      } = this;


      let id = "";
      if (isShowTabar==1) {
        id = tmZzObj.id;
      } else {
        id = ptZzObj.id;
      }
      $ajax.psGL_buy(id, resData => {
        this.TPzBox = false;
        let { order_id } = resData;
        $app.payBoxShow(this, order_id, {
          payFun: () => {
            this.showBox = false;
          }
        });
      });
    },
    // 获得次数
    huoDci() {
      $ajax.wZcList(({ role_service_item_list, service_item_list }) => {
        this.vwrShow = true;
        this.role_service_item_list = role_service_item_list; //用户角色套餐(免费)
        this.service_item_list = service_item_list; //已经购买的年费套餐
      });
    },
    //商标45分类弹框
    FenL45BB() {
      this.$refs["FenL45"].showBox = true; //显示弹框
    },
    
    // 选择搜索类型
    selectType_tm({type,placeholder}) {
      this.tm_tab_type = type;
      this.placeholder = placeholder;
    },
    selectType_pt({type,placeholder}) {
      this.pt_tab_type = type;
      this.placeholder = placeholder;
    },






    owrX() {
      let { fcgnum, listcCm } = this;
      let out = "";
      for (let i = 0; i < listcCm.length; i++) {
        if (fcgnum == listcCm[i].fcgnum) {
          out = listcCm[i].fcgname;
          break;
        }
      }
      return out;
    },
    //商标包年套餐单词购买
    rweX() {
      let { companyYes } = this;
      if ($app.judgeData(companyYes)) {
        //有企业认证
        // this.$refs["TaoCan"].showBox = true;
        this.tmGoOne();
      } else {
        //没有企业认证
        this.TPzBox = true; //显示弹框
      }
    },
    //45类选择框
    werC(num) {
      this.fcgnum = num;
      this.f_45BoxC = false;
      this.f_45BoxTuX = false;
    },
    // 专利搜索
    searchPt() {
      const {
        $route: { name },
        query_key,
        pt_tab_type
      } = this;

      if ($app.judgeData($app.delSpace(query_key))) {
        if (this.itemNum !== 0) {
          this.page = 1;
          this.reg_people_show = false;
          this.reg_people_show2 = false;
          this.query_key = this.reg_people_names[this.itemNum - 1];
          this.itemNum = 0;
          $app.closeHadPage("patentList", () => {
            // 页面跳转
            this.$router.push({
              name: "patentList",
              query: {
                query_key: this.query_key,
                type:pt_tab_type
              }
            });
          });
        } else {
          if (pt_tab_type == 3) {
            this.queryApplicantOne();
          } else if (pt_tab_type == 4) {
            this.queryAgentP();
          } else if (pt_tab_type == 5) {
            this.queryAgentcy();
          } else {
            $app.closeHadPage("patentList", () => {
              // 页面跳转
              this.$router.push({
                name: "patentList",
                query: {
                  query_key,
                  type:pt_tab_type
                }
              });
            });
          }
        }
      } else {
        this.$Message.error({content: this.placeholder});
        this.$refs["oop"].focus();
        this.query_key = "";
      }
    },
    // 判断专利检索今天的次数
    // juJj() {
    //   // 判断是否有卖年报告
    //   let out = "";
    //   if ($app.judgeData(this.service_item_list.patent_search)) {
    //     out = true;
    //   } else {
    //     let {
    //       role_service_item_list: {
    //         patent_search: { num, used_num }
    //       }
    //     } = this;
    //     if (used_num >= num) {
    //       //今天已经用完了
    //       out = false;
    //     } else {
    //       out = true;
    //     }
    //   }
    //   return out;
    // },
    // 判断商标检索今天的次数
    juVvQ() {
      // 判断是否有买年报告
      let out = "";
      if ($app.judgeData(this.service_item_list.tm_search)) {
        out = true;
      } else {
        let {
          role_service_item_list: {
            tm_search: { num, used_num }
          },
          tm_tab_type
        } = this;
        if ((tm_tab_type == 0 || tm_tab_type == 4 || tm_tab_type == 5) && used_num >= num) {
          //今天已经用完了
          out = false;
        } else {
          out = true;
        }
      }
      return out;
    },
    // 专利 搜索框是否，禁止按
    conMk() {
      let {
        pt_tab_type //1专利号，2专利名，3申请人，4代理人，5代理机构
      } = this;
      let out = "";
      if (pt_tab_type > 3) {
        out = !$app.judgeData(this.service_item_list.patent_search);
      } else {
        out = false;
      }
      return out;
    },

    // 商标 搜索框是否，禁止按
    conWc() {
      let {
        tm_tab_type //0商标成功率检索，1商标名称，5图形，2申请号，3申请人，4代理机构
      } = this;
      let out = "";

      if (tm_tab_type == 4) {
        out = !$app.judgeData(this.service_item_list.tm_search);
      } else {
        out = !this.juVvQ();
      }
      return out;
    },
    // 商标检索
    searchTm() {
      const {
        fcgnum,
        fcgname,
        query_key,
        $route: { name }
      } = this;

      if ($app.judgeData($app.delSpace(query_key))) {
        $app.closeHadPage("Trademarklist", () => {
          // 页面跳转
          this.$router.push({
            name: "Trademarklist",
            query: {
              fcgnum,
              query_key
            }
          });
        });
      } else {
        this.$Message.error({content: this.placeholder});
        this.$refs["oop"].focus();
        this.query_key = "";
      }
    },
    // 商标搜索
    searchJTm() {
      const {
        query_key,
        tm_tab_type,
        reg_people_show,
        reg_people_show2,
        itemNum,
        $route: { name }
      } = this;

      if ($app.judgeData($app.delSpace(query_key))) {
        if (reg_people_show && reg_people_show2) {
          if (itemNum == 0) {
            return;
          }
          this.selectName(itemNum - 1);
        } else {
          if (tm_tab_type == 3) {
            this.queryRegPeople(); //申请人查询查询
          } else if (tm_tab_type == 4) {
            this.queryAgentT(); //代理机构模糊查询
          } else {
            $app.closeHadPage("Trademarklists", () => {
              // 页面跳转
              this.$router.push({
                name: "Trademarklists",
                query: {
                  query_key,
                  type: tm_tab_type
                }
              });
            });
          }
        }
      } else {
        this.$Message.error({content: this.placeholder});
        this.$refs["oop"].focus();
        this.query_key = "";
      }
    },
    // 上下选择
    selectItem(num) {
      let { itemNum, reg_people_names, scrollTop } = this;
      if (itemNum <= 0) {
        if (num > 0) {
          this.itemNum += num;
        } else {
          this.itemNum = 0;
        }
      } else if (itemNum >= reg_people_names.length && num > 0) {
        this.itemNum = reg_people_names.length;
      } else {
        this.itemNum += num;
      }
    },
    // 选择模糊名字
    selectName(index) {
      const {
        $route: { name }
      } = this;
      this.query_key = this.reg_people_names[index];
      $app.closeHadPage("Trademarklists", () => {
        // 页面跳转
        this.$router.push({
          name: "Trademarklists",
          query: {
            query_key: this.query_key,
            type: this.tm_tab_type
          }
        });
      });
    },
    // 专利模糊查询 申请人
    queryApplicantOne() {
      let { query_key: applicant_one } = this;
      $ajax.lb_queryApplicantOne(
        { applicant_one },
        resData => {
          this.reg_people_show = true;
          this.reg_people_show2 = true;
          this.reg_people_names = resData;
          this.itemNum = 0;
        },
        () => {
          this.$refs["aop"].focus();
        }
      );
    },

    // 专利模糊查询 代理人
    queryAgentP() {
      let { query_key: agent } = this;
      $ajax.lb_queryAgent(
        { agent },
        resData => {
          this.reg_people_show = true;
          this.reg_people_show2 = true;
          this.reg_people_names = resData;
          this.itemNum = 0;
        },
        () => {
          this.$refs["aop"].focus();
        }
      );
    },
    // 模糊查询 代理机构
    queryAgentcy() {
      let { query_key: agency } = this;
      $ajax.lb_queryAgent_cy(
        { agency },
        resData => {
          this.reg_people_show = true;
          this.reg_people_show2 = true;
          this.reg_people_names = resData;
          this.itemNum = 0;
        },
        () => {
          this.$refs["aop"].focus();
        }
      );
    },

    // 商标模糊查询申请人
    queryRegPeople() {
      let { query_key: reg_people_name } = this;
      $ajax.lb_getQueryRegPeople(
        { reg_people_name },
        resData => {
          this.reg_people_show = true;
          this.reg_people_show2 = true;
          this.reg_people_names = resData;
        },
        () => {
          this.$refs["oop"].focus();
        }
      );
    },
    // 商标模糊查询代理机构
    queryAgentT() {
      let { query_key: agent_name } = this;
      $ajax.lb_getQueryAgent(
        { agent_name },
        resData => {
          this.reg_people_show = true;
          this.reg_people_show2 = true;
          this.reg_people_names = resData;
        },
        () => {
          this.$refs["oop"].focus();
        }
      );
    },

    // 图片上传 提交搜索
    tmCutFun(str) {
      let { fcgnum } = this;
      $app.closeHadPage("TrademarklistsImg", () => {
        // 页面跳转
        this.$router.push({
          name: "TrademarklistsImg",
          query: {
            str,
            fcgnum
          }
        });
      });
    },
    //上传图片
    file_Up(e) {
      let that = this;
      let file = e.target.files[0]; //选中的文件

      //格式判断
      $app.suffix.jpgPng(e, file,false, () => {
        //创建实例
        var reader = new FileReader();
        //异步读取文件内容
        reader.readAsDataURL(file);

        //读取操作成功完成
        reader.onload = e => {
          let result = e.target.result;
          this.$refs['CutImg'].showBox = true;
          this.$refs['CutImg'].inImg = result;
          // console.log('reader = ',e);
        };
      });
    }
  }
};
</script>
